"use client";
import React, {useState} from "react";
import {Box, Group, Tabs, TabsList, TabsPanel, TabsTab} from "@mantine/core";
import {IconRoute, IconCookie, IconChartBar} from "@tabler/icons-react";
import classes from "./page.module.css";
import {IpdSimuGran} from "@/components/IpdSimuConfigs/IpdSimuGran";
import {IpdSimuTrans} from "@/components/IpdSimuConfigs/IpdSimuTrans";
import {IpdSimuUtil} from "@/components/IpdSimuConfigs/IpdSimuUtil";
import {IpdSimuHeader} from "@/components/IpdSimuSteps/IpdSimuHeader";
import {IpdModify} from "./components/Modify/IpdModify";
import {IpdSimuStatistic} from "./components/Statistic/IpdSimuStatistic";

export default function Page() {
  // 这些数据都从后端获取，并且实时监测。一旦发生变化，对应组件发生更新
  const [isChecked, setIsChecked] = useState(false); // 页面级数据确认
  const utilization = 80; // 利用率
  const granularity = "10G"; // 最小颗粒度
  const transRange = "全部转换"; // 转换范围
  const transRule = "6 x 1G = 1 x 10G, 6 x 10G = 1 x 100G"; // 转换规则

  return (
    <>
      {/* 第一层：顶部信息和导航 */}
      <Box className={classes.box}>
        <IpdSimuHeader
          stepName={"第三步：结果调整"}
          backwardEnable={true}
          backwardLink={"/ipdv2/tools/relay-simulation/step2"}
          forwardEnable={false}
          forwardLink={""}
        />
      </Box>

      {/* 第二层：快捷操作 */}
      <Box className={classes.top}>
        <Group justify="space-between">
          <Group gap="xs">
            {/* 利用率配置 */}
            <IpdSimuUtil value={utilization} disabled={isChecked} />
            {/* 最小颗粒度配置 */}
            <IpdSimuGran value={granularity} disabled={isChecked} />
            {/* 转换关系配置 */}
            <IpdSimuTrans disabled={isChecked} />
          </Group>
        </Group>
      </Box>

      {/* 第三层：页面主体内容 */}
      <Box>
        <Tabs color="violet" defaultValue="result">
          <TabsList>
            <TabsTab value="result" leftSection={<IconCookie size={14} stroke={2} />}>
              结果调整表
            </TabsTab>
            <TabsTab value="path" leftSection={<IconRoute size={14} stroke={2} />}>
              最短路径表
            </TabsTab>
            <TabsTab value="statistic" leftSection={<IconChartBar size={14} stroke={2} />}>
              统计指标表
            </TabsTab>
          </TabsList>

          <TabsPanel value="result">
            <Box m="lg">
              <IpdModify />
              这里还应该有筛选组件
            </Box>
          </TabsPanel>
          <TabsPanel value="path">最短路径，也要有筛选功能</TabsPanel>
          <TabsPanel value="statistic">
            <IpdSimuStatistic />
          </TabsPanel>
        </Tabs>
      </Box>
    </>
  );
}
